<template>
  <div class="po-container-parent" id="advisory" :style="{minHeight: height+'px'}">
    <el-container style="justify-content: center;">
      <div class="" style="width: 780px;margin-right: 170px;margin-bottom: 60px;min-width: 780px;">
        <advisory-list ref="advisory"></advisory-list>
      </div>
      <el-aside width="310px" class="animated fadeInRightBig delay-2s">
        <div class="advisory-events">
          <div class="advisory-events-item" v-for="(ev, index) in events" :key="index">
            <el-card :body-style="{ padding: '0px'}"
            shadow="never" >
              <div class="advisory-img-container">
                <img :src="getImgUrl(ev.basicThumbnails, index)" class="image">
              </div>
              <div class="over-events titleshow" @click="goDetails(ev)">
                <span>{{ev.basicTitle}}</span>
              </div>
            </el-card>
          </div>
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import AdvisoryList from './AdvisoryList'
import axios from 'axios'

let loadThirdEvent = async function (self) {
  // 加载资讯
  let params = {
    offset: 0,
    limit: 3,
    type: '2F462874597F11E892D5A46C2A38CB5E'
  }
  let advRes = await axios.post('/mscs/activity/findActivityBasic', self.$paramsConvert(params))
  self.events = advRes.data.data
}

export default {
  title: '咨询',
  name: 'advisory',
  data () {
    return {
      events: []
    }
  },
  mounted () {
    loadThirdEvent(this)
  },
  methods: {
    goDetails (ev) {
      const {href} = this.$router.resolve({
        name: 'eventdetails',
        query: {id: ev.modelId || ev.informationId, basicType: ev.basicType, browseNumber: ev.browseNumber, comments: ev.comments}
      })
      window.open(href, '_blank')
    },
    getImgUrl (url, index) {
      if (url) {
        return url
      }
      let i = index % 3
      if (i === 0) {
        return 'static/morenhuodongtu1.png'
      } else if (i === 1) {
        return 'static/morenhuodongtu2.png'
      } else {
        return 'static/morenhuodongtu3.png'
      }
    },
    setFirstTab () {
      this.$refs.advisory.autoSelect()
    }
  },
  computed: {
    height () {
      let height = this.$store.state.height.client - this.$store.state.height.header - this.$store.state.height.footer
      return height
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (to.params.type === '活动列表') {
        vm.setFirstTab()
      }
    })
  },
  components: {
    'advisory-list': AdvisoryList
  }
}
</script>
<style>
  #advisory {
    /* padding: 30px; */
    padding-top: 30px;
  }
  .advisory-events {
    padding-top: 110px;
    text-align: center;
  }
  .advisory-events .el-card {
    border: none;
  }
  .advisory-events-item {
    position: relative;
    width: 310px;
    float: right;
    margin: 10px 0;
  }
  .titleshow {
    display: none;
  }
  .advisory-events-item:hover .titleshow {
    display: inherit;
  }
  .over-events {
    position: absolute;
    /* display: none; */
    top: 0px;
    bottom: 0px;
    text-align: center;
    width: 310px;
    height: 150px;
    padding: 10px;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: bold;
    background: rgba(0,0,0,0.7);
    cursor: pointer;
    z-index: 10;
    color: #fff;
  }
</style>
